<template>
  <el-dialog width="70%" :title="title" v-model="visible" :close-on-click-modal="false" draggable>
    <div v-loading="state.loading">

      <el-table height="calc(100vh - 400px)" :data="state.dataList" border
                :cell-style="tableStyle.cellStyle"
                :header-cell-style="tableStyle.headerCellStyle" highlight-current-row
                @sort-change="sortChangeHandle">
        <el-table-column label="#" width="60">
          <template #default="scope">
            {{ state.pagination.size * (state.pagination.current - 1) + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column type="selection" width="40" align="center"/>
        <el-table-column type="index" label="#" width="50"/>
        <el-table-column prop="doctorCode" label="医生工号" show-overflow-tooltip/>
        <el-table-column prop="doctorName" label="医生姓名" show-overflow-tooltip/>
        <el-table-column prop="visitDept" label="就诊科室" show-overflow-tooltip/>
        <el-table-column prop="customerName" label="患者姓名" show-overflow-tooltip/>
        <el-table-column prop="icCard" label="身份证号" width="180" show-overflow-tooltip/>
        <el-table-column prop="medicalCard" label="社保卡号" show-overflow-tooltip/>
        <el-table-column prop="visitTime" label="就诊时间" width="180" show-overflow-tooltip/>
        <el-table-column prop="visitEndTime" label="结束时间" width="180" show-overflow-tooltip/>
      </el-table>
      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                  v-bind="state.pagination"/>
    </div>
  </el-dialog>
</template>
<script setup lang="ts" name="examDataView">
import {BasicTableProps, useTable} from "/@/hooks/table";
import {fetchList} from "/@/api/blood/bloodxCistomerDirection";

const visible = ref(false);
const title = ref('');
// const showSearch = ref(true);
const queryRef = ref();

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  descs: ['visit_time'],
  // pageList: getDirectionRecordsList,
})

const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  sortChangeHandle,
  tableStyle
} = useTable(state);

const openDialog = (row: any) => {
  queryRef.value?.resetFields();
  state.queryForm.icCard = row.card;
  visible.value = true;
  state.pageList = fetchList;
  getDataList()
};

// const queryBtn = () => {
//   getDataList();
// };
//
// const resetQuery = () => {
//   queryRef.value?.resetFields();
//   getDataList();
// };

// 暴露变量
defineExpose({
  openDialog,
});
</script>
